{% extends "base_generic.html" %}

{% block extra_css %}
<style>
  .book-cover {
    max-height: 400px;
    object-fit: contain;
  }
  
  .book-info {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .book-meta {
    color: #777;
    font-size: 0.9rem;
  }
  
  .book-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  
  .review-form {
    margin-top: 30px;
  }
</style>
{% endblock %}

{% block content %}
  <div class="detail-header">
    <h1>{{ book.title }}</h1>
    <p class="lead">作者: <a href="{% url 'author-detail' book.author.pk %}" class="text-white">{{ book.author }}</a></p>
  </div>
  
  <div class="row mb-4">
    <div class="col-md-4">
      <div class="text-center">
        {% if book.cover %}
          <img src="{{ book.cover.url }}" alt="{{ book.title }}" class="img-fluid book-cover">
        {% else %}
          <div class="book-card-img d-flex align-items-center justify-content-center">
            <i class="fas fa-book fa-5x"></i>
          </div>
        {% endif %}
        
        {% if user.is_authenticated %}
          <div class="action-buttons mt-3">
            <button id="like-button" class="action-btn {% if user_has_liked %}active{% endif %}" data-book-id="{{ book.id }}">
              <i class="fas fa-thumbs-up"></i> <span id="like-count">{{ book.total_likes }}</span>
            </button>
            <button id="favorite-button" class="action-btn {% if user_has_favorited %}active{% endif %}" data-book-id="{{ book.id }}">
              <i class="fas fa-heart"></i> <span id="favorite-count">{{ book.total_favorites }}</span>
            </button>
          </div>
        {% endif %}
      </div>
    </div>
    
    <div class="col-md-8">
      <div class="book-info">
        <div class="mb-3">
          <div class="rating">
            {% with ''|center:book.get_average_rating as range %}
              {% for _ in range %}
                <i class="fas fa-star"></i>
              {% endfor %}
            {% endwith %}
            <span class="ms-2">{{ book.get_average_rating|floatformat:1 }} / 5</span>
          </div>
        </div>
        
        <h4>简介</h4>
        <p>{{ book.summary }}</p>
        
        <div class="book-meta">
          <p><strong>ISBN:</strong> {{ book.isbn }}</p>
          <p>
            <strong>类型:</strong> 
            {% for genre in book.genre.all %} 
              <span class="badge bg-secondary">{{ genre }}</span>
            {% endfor %}
          </p>
          
          {% if book.price %}
            <p><strong>价格:</strong> ¥{{ book.price }}</p>
          {% endif %}
          
          {% if book.publication_date %}
            <p><strong>出版日期:</strong> {{ book.publication_date }}</p>
          {% endif %}
        </div>
        
        <div class="book-actions">
          {% if perms.catalog.can_mark_returned %}
            <a href="{% url 'book-update' book.id %}" class="btn btn-warning">
              <i class="fas fa-edit"></i> 编辑
            </a>
            <a href="{% url 'book-delete' book.id %}" class="btn btn-danger">
              <i class="fas fa-trash"></i> 删除
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  
  <div class="detail-section">
    <h3>图书副本</h3>
    <div class="row">
      {% for copy in book.bookinstance_set.all %}
      <div class="col-md-6 col-lg-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">
              <span class="badge {% if copy.status == 'a' %}bg-success{% elif copy.status == 'm' %}bg-danger{% else %}bg-warning{% endif %}">
                {{ copy.get_status_display }}
              </span>
            </h5>
            
            {% if copy.status != 'a' %}
              <p><strong>预计归还日期:</strong> {{ copy.due_back }}</p>
            {% endif %}
            
            <p><strong>编号:</strong> {{ copy.id }}</p>
            
            {% if copy.borrower %}
              <p><strong>借阅者:</strong> {{ copy.borrower }}</p>
            {% endif %}
            
            <div class="mt-3">
              {% if copy.status == 'a' and user.is_authenticated %}
                <a href="{% url 'borrow-book' copy.id %}" class="btn btn-success btn-sm">
                  <i class="fas fa-book-reader me-1"></i> 借阅
                </a>
              {% endif %}
              
              {% if perms.catalog.can_mark_returned and copy.status == 'o' %}
                <a href="{% url 'renew-book-librarian' copy.id %}" class="btn btn-info btn-sm">
                  <i class="fas fa-calendar-plus me-1"></i> 续借
                </a>
                <a href="{% url 'return-book' copy.id %}" class="btn btn-warning btn-sm">
                  <i class="fas fa-undo me-1"></i> 归还
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% empty %}
        <div class="col-12">
          <div class="alert alert-info">该书籍暂无副本</div>
        </div>
      {% endfor %}
    </div>
  </div>
  
  {% if user.is_authenticated %}
    <div class="detail-section">
      <h3>发表评论</h3>
      {% if user_review %}
        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>您已经评论过这本书了。您可以更新您的评论。
        </div>
      {% endif %}
      
      <form method="post" action="{% url 'add-review' book.id %}" class="review-form">
        {% csrf_token %}
        <div class="mb-3">
          <label for="id_rating" class="form-label">评分 (1-5)</label>
          <input type="number" name="rating" id="id_rating" min="1" max="5" class="form-control" value="{{ user_review.rating|default:5 }}" required>
        </div>
        <div class="mb-3">
          <label for="id_comment" class="form-label">评论</label>
          <textarea name="comment" id="id_comment" rows="5" class="form-control" required>{{ user_review.comment|default:'' }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交评论</button>
      </form>
    </div>
  {% endif %}
  
  <div class="detail-section">
    <h3>用户评论</h3>
    {% for review in book.review_set.all %}
      <div class="review-item">
        <div class="review-header">
          <div class="review-author">{{ review.user.username }}</div>
          <div class="review-date">{{ review.created_date|date:"Y-m-d H:i" }}</div>
        </div>
        <div class="rating">
          {% with ''|center:review.rating as range %}
            {% for _ in range %}
              <i class="fas fa-star"></i>
            {% endfor %}
          {% endwith %}
        </div>
        <p>{{ review.comment }}</p>
      </div>
    {% empty %}
      <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>暂无评论，成为第一个评论者吧！
      </div>
    {% endfor %}
  </div>
  
  {% if similar_books %}
    <div class="detail-section">
      <h3>您可能还喜欢</h3>
      <div class="row">
        {% for similar_book in similar_books %}
          <div class="col-md-3 mb-4">
            <div class="book-card">
              <div class="book-card-img">
                {% if similar_book.cover %}
                  <img src="{{ similar_book.cover.url }}" alt="{{ similar_book.title }}">
                {% else %}
                  <div class="d-flex align-items-center justify-content-center h-100">
                    <i class="fas fa-book fa-3x"></i>
                  </div>
                {% endif %}
              </div>
              <div class="book-card-body">
                <h5 class="book-card-title">{{ similar_book.title }}</h5>
                <p class="book-card-author">{{ similar_book.author }}</p>
                <a href="{{ similar_book.get_absolute_url }}" class="btn btn-primary btn-sm">查看详情</a>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block extra_js %}
<script>
  $(document).ready(function() {
    // 点赞功能
    $('#like-button').click(function() {
      const bookId = $(this).data('book-id');
      $.ajax({
        url: `/catalog/book/${bookId}/like/`,
        type: 'POST',
        headers: {
          'X-CSRFToken': '{{ csrf_token }}'
        },
        success: function(data) {
          if (data.status === 'success') {
            $('#like-count').text(data.total_likes);
            if (data.is_liked) {
              $('#like-button').addClass('active');
            } else {
              $('#like-button').removeClass('active');
            }
          }
        }
      });
    });
    
    // 收藏功能
    $('#favorite-button').click(function() {
      const bookId = $(this).data('book-id');
      $.ajax({
        url: `/catalog/book/${bookId}/favorite/`,
        type: 'POST',
        headers: {
          'X-CSRFToken': '{{ csrf_token }}'
        },
        success: function(data) {
          if (data.status === 'success') {
            $('#favorite-count').text(data.total_favorites);
            if (data.is_favorite) {
              $('#favorite-button').addClass('active');
            } else {
              $('#favorite-button').removeClass('active');
            }
          }
        }
      });
    });
  });
</script>
{% endblock %} 